<template>
  <div class="fileUpload bg-white">
    <div class="container pt-4">
      <div class="row">
        <div class="col-12">
          <div class="pointsRule">
            <ul id="list">
              <li style="z-index:6;background-image: linear-gradient(to right, #005bea ,#00c6fb)" class="green" @click="gotoHome()"><a><span>首页</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:5;background-image: linear-gradient(to right, #005bea ,#00c6fb)" @click="gotoNav()"><a><em class="before"></em><span>预算管理</span><i
                style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:4;background-image: linear-gradient(to right, #005bea ,#00c6fb)" @click="gotoNav3()"><a><em class="before"></em><span>预算编制</span><i
                style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:3;background-color: #ffc107;"><a><em class="before"></em><span style="color: #4e555b;">{{company}}预算编制底稿</span><i
                style="background-color:#ffc107;"></i></a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="container mt-5">
      <div class="mt-4 table">
        <el-table :data="fileData" tooltip-effect="dark">
          <el-table-column type="selection">
          </el-table-column>
          <el-table-column prop="uploadTime" label="年份" width="120px">
          </el-table-column>
          <el-table-column prop="fileName" label="文件名">
            <template slot-scope="scope">
              <a :href="'/api/download?path='+scope.row.fileName ">{{scope.row.fileName}}</a>
            </template>
          </el-table-column>
          <el-table-column align="right">
            <template slot="header" slot-scope="scope">
              <el-input @change="getFileListByFileName" v-model="search" size="mini" placeholder="输入关键字搜索" />
            </template>
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row.fileName)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="row mt-3">
        <div class="col-6">
          <el-pagination
            @current-change="handleCurrentChange"
            :page-size="5"
            layout="total, prev, pager, next"
            :total="pageTotal">
          </el-pagination>
        </div>
        <div class="col-6 text-right">
          <el-button size="small" type="success" @click="dialogFormVisible=true">点击上传</el-button>
        </div>
      </div>
    </div>
    <el-dialog title="上传文件" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item>
          <el-select placeholder="请选择年份" v-model="form.year">
            <el-option :label="year" :value="year"></el-option>
            <el-option :label="year+1" :value="year+1"></el-option>
          </el-select>
        </el-form-item>
        <el-upload
          class="upload-demo"
          action=""
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :http-request="getFile"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :file-list="fileList">
          <el-button size="small" type="success">点击上传</el-button>
<!--          <div slot="tip" class="el-upload__tip" >只能上传jpg/png文件，且不超过500kb</div>-->
          <!--            <el-button size="small" type="success" @click="upload">确认上传</el-button>
           -->          </el-upload>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="getFile1()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: "fileUpload",
    data() {
      return {
        dialogFormVisible: false,
        year: '',
        fileData: [],
        fileList: [],
        pageTotal: 0,
        currentPage: 1,
        company: window.sessionStorage.getItem('company'),
        orgid: window.sessionStorage.getItem('orgid'),
        form: {
          year: '',
        },
        search: '',
        item : {},
      }
    },
    created() {
      var date = new Date()
      this.year = date.getFullYear()
      this.getFileList()
    },
    methods: {
      handleCurrentChange(val){
        this.currentPage = val;
        this.getFileList();
      },
      //文件列表
      getFileList() {
        axios.get('/api/fileList',
          {
            params: {
              page: this.currentPage,
              limit: 5,
              orgid: this.orgid
            }
          })
          .then(res => {
            this.fileData = res.data
            this.pageTotal = res.data[0].count
          })
          .catch(err => {

          })
      },
      //文件列表
      getFileListByFileName() {
        var fileName=this.search
        if (fileName != null && fileName != '') {
          axios.get('/api/fileList/fileName',
            {
              params: {
                fileName: fileName
              }
            })
            .then(res => {
              this.fileData = res.data;
              alert(JSON.stringify(fileData))
            })
            .catch(err => {

            })
        }

      },
      //删除文件
      handleDelete(filename){
        this.$http.get(
          '/api/delFile',
          {
            params: {
              fileName: filename
            }
          }
        ).then(res => {
            if(res.status==200){
              this.$message({
                type: "success",
                message: '删除成功'
              })
              this.getFileList();
            }
        })

        // axios.post('/api/delFile',
        //   {
        //     params: {
        //       fileName: row.fileName
        //     }
        //   })
        //   .then(res => {
        //     console.log(res);
        //
        //   })
        //   .catch(err => {
        //
        //   })
      },

      gotoHome() {
        this.$router.push("/index");
      },
      //跳转到书吧
      gotoNav: function() {
        this.$router.push("/nav2");
      },
      gotoNav3: function() {
        this.$router.push("/nav3");
      },
      getFile(item) {
        console.log(item)
        this.item = item;
      },
      getFile1() {
        let item = this.item;
        let file = item.file;
        let formData = new FormData()
        formData.append('file', file)
        formData.append("username", this.orgid)
        formData.append("time", this.form.year)
        axios.post('/api/uploadFile',
          formData, {
            "Content-Type": "multipart/form-data"
          }
        )
          .then(res => {
            if(res.data.indexOf("成功")!=-1){
              this.dialogFormVisible=false
              this.getFileList()
              this.$message({
                type: "success",
                message: '上传成功！'
              })
            }
          })
          .catch(err => {

          })

      },
      upload() {
        const fd = new FormData()
        fd.append('filename', this.file)
        console.log(1)

      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      }
    }
  }
</script>

<style>
  .fileUpload h3 {
    border-bottom: 2px dashed #eeeeee;
    letter-spacing: 2px;
  }
   .fileUpload {
     height: 200%;
   }
  .el-table tr:nth-child(even) {
    background: #eeeeee;
  }

  .fileUpload .table {
    border: 1px solid #eeeeee;
    box-shadow: 0 0 10px #cbd3da;
    padding: 10px;
    margin: 0;
  }

  .fileUpload .el-table__header {
    width: auto;
  }

  .fileUpload label {
    margin-bottom: 0;
  }
</style>
